<template>
  <div class="admin">
    <p><img :src="img" alt="" /></p>
    <p>{{ name }}</p>
    <p>{{ text }}</p>
    <p>
      <el-tooltip content="我的GitHub" style="border: none">
        <el-button @click="sx"
          ><img src="../assets/10001.svg" alt=""
        /></el-button>
      </el-tooltip>
      <!-- <span><img src="../assets/10001.svg" alt="" /></span> -->
      <el-tooltip content="我的知乎" style="border: none">
        <el-button @click="sx1"
          ><img src="../assets/10002.svg" alt=""
        /></el-button>
      </el-tooltip>
      <!-- <span></span> -->
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      img: "",
      text: "",
      icon1: "",
      icon2: "",
    };
  },
  created() {
    this.getAdmin();
  },
  methods: {
    sx1() {
      window.location.href = "https://www.quanxiaoha.com/";
    },
    sx() {
      if (this.$route.path === "/") {
        window.location.reload();
      } else {
        if (this.$route.path !== "/home") {
          this.$router.push("/home").catch((err) => {
            if (err.name !== "NavigationDuplicated") {
              throw err;
              // 当重复点击同一个导航时有时候会发生NavigationDuplicated错误，一次为冗余导航
              // 该问题不影响功能，为了解决其问题，使用异常捕获catch去捕获这个问题，让他不影响内容
              // 其他的错误正常返回错误
            }
          });
        }
      }
    },

    getAdmin() {
      this.$axios
        .post("http://47.104.167.34:9110/api/blog/setting/detail", {
          params: {
            // current: 1,
            // size: 10,
          },
        })
        .then((r) => {
          console.log(r, "ok-admin");
          let result = r.data.data;
          // console.log(result, "ok-admin");
          this.name = result.author;
          this.img = result.avatar;
          this.text = result.introduction;
        })
        .catch((r) => {
          console.log(r, "catch");
        });
    },
  },
};
</script>

<style scoped>
.admin {
  width: 100%;
  height: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  border-radius: 10px;
}
.admin p {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.admin p:nth-child(1) img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 1px 4px 4px 2px rgba(152, 142, 142, 0.519);
  margin-bottom: 0.75rem;
}
.admin p:nth-child(2) {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
}
.admin p:nth-child(3) {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.admin p:nth-child(4) {
  width: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>